<template>
  <!-- hidden PageHeaderWrapper title demo -->
  <page-header-wrapper :title="false">
    <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
      <a-table
        :columns="columns"
        :data-source="tableData"
        :loading="loading"
        bordered>
        <span slot="process" slot-scope="text, record" :style="{ color: activeColor[record.process]}">{{ state[record.process] }}</span>
        <div slot="action" slot-scope="text, record">
          <a @click="handleDetail(record)">填报学科数据</a>
        </div>
      </a-table>
      <a-modal v-model="visible" title="历史记录" @ok="handleOk" :footer="null">
        <p v-for="(item, index) in recordlist" :key="index">
          {{ item }}
        </p>
      </a-modal>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { getSubjectListTable } from '@/api/table'
export default {
  name: 'BaseForm',
  components: {
    STable
  },
  data () {
    return {
      loading: true,
      visible: false,
      state: ['未上传', '已上传', '已退回'],
      activeColor: ['#656565', '#52c41a', '#ff4d4f'],
      columns: [{
        title: '学科代码',
        key: 'code',
        dataIndex: 'code'
      },
      {
        title: '学科',
        key: 'subject',
        dataIndex: 'subject'
      },
      {
        title: '操作',
        key: 'action',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' }
      }],
      tableData: [],
      recordlist: []
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      return new Promise((resolve, reject) => {
        getSubjectListTable().then(response => {
          this.tableData = response.data
          this.loading = false
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },
    handleDetail (record) {
      this.$router.push({
          name: 'SubjectDataFill',
          query: {
              id: record.code,
              title: record.subject
          }
      })
    },
    // handleHistory (recordlist) {
    //   this.recordlist = recordlist
    //   this.visible = true
    // },
    handleOk () {
      this.visible = false
    }
  }
}
</script>
<style lang="less" scoped>
  .action button {
    margin-top: 4px;
  }
  .record {
    text-align: center;
  }
  .record span {
    display: block;
  }
</style>
